<template>
  <el-menu :collapse="$store.state.expand.mauncollapse" :collapse-transition="false" @select="navigation">
 <div v-for="nav in $store.state.sbasde.meuns" :key="nav.label">
       <el-menu-item :index="nav.label" @click="fn(nav.path,nav.label)" v-if="!nav.children">
         <i :class="nav.icon"></i>
         <span slot="title">{{nav.label}}</span>
       </el-menu-item>
       <el-submenu :index="nav.label" v-if="nav.children">
         <template slot="title">
           <i :class="nav.icon"></i>
           <span slot="title">{{nav.label}}</span>
         </template>
         <template>
           <el-menu-item v-for="subnav in nav.children" :key="subnav.path" :index="subnav.label"
                         @click="fn(subnav.path,subnav.label)">
             {{subnav.label}}
             </el-menu-item>
         </template>
       </el-submenu>
 </div>
  </el-menu>
</template>
<script>

export default {
  name: "side.vue",
  // 侧边组件
  data() {
    return {
      names: [],//头部导航的数据
    }
  },
  methods: {
    //点击跳转路由
    navigation(current, names) {
      //头部导航和侧边联动
      this.names = names
      //切换导航事件Label
        this.$store.commit('NAVIGATION', names)
        this.names= names

    },

    fn(path,navTab) {
      this.$router.push(path)
      //头部导航和侧边联动vuex 传值
      //增加头部导航
      if (path==='/meter'){
        //去仪表盘不添加
        return false
      }
    this.$store.commit('ADD_TABS',{ label:navTab,path,names:this.names})
    }
  },
}

</script>

<style lang="scss" scoped>
::v-deep.el-menu {
  background: rgb(49, 77, 102);

  .el-submenu .el-menu {
    background: rgb(49, 77, 102);

  }

  .el-submenu__title:hover {
    background-color: #4787c0;
  }

  .el-menu-item:focus, .el-menu-item:hover {
    background-color: #4787c0;
  }

  span {
    color: #909399;
  }
}

[data-v-6915a6fa].el-menu span {
  color: #f1f5fb;
}

.el-submenu__title i {
  color: #e5e5e5;
}

.el-icon-setting:before {
  content: "\e6ca";
  color: #e5e5e5
}

.el-icon-menu:before {
  content: "\e798";
  color: #e5e5e5
}

.el-icon-s-grid:before {
  content: "\e7a6";
  color: #e5e5e5
}

</style>
